[V0_FILE]typescriptreact:file="next.config.ts" isEdit="true" isQuickEdit="true" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, experimental: { appDir: true, }, eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import "./globals.css" import type { ReactNode } from "react" export const metadata = { title: "x402 Starter", description: "Minimal example with custom paywall", } export default function RootLayout({ children }: { children: ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" export default function HomePage() { return (

🎉 Payment Successful!

Now you can view this premium content.

@estebansuarez What is x402? Open in v0

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; height: 100%; } a { text-decoration: none; color: #6b7280; transition: color 0.2s; } a:hover { color: #1f2937; } main { padding: 2rem; text-align: center; max-width: 400px; background-color: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } [V0_FILE]typescriptreact:file="middleware.ts" isEdit="true" import { paymentMiddleware, type Resource, type Network } from "x402-next" import type { Address } from "viem" import { customPaywallHtml } from "./lib/customPaywall" const payTo = process.env.RESOURCE_WALLET_ADDRESS as Address const network = process.env.NETWORK as Network const facilitatorUrl = process.env.NEXT_PUBLIC_FACILITATOR_URL as Resource const price = process.env.PRICE || "$0.01" // Usar la variable de entorno PRICE con fallback export const middleware = paymentMiddleware( payTo, { "/": { price, // Usar la variable price que viene de la variable de entorno network, config: { description: "Unlock premium content with a small payment", customPaywallHtml: customPaywallHtml, }, }, }, { url: facilitatorUrl, }, ) export const config = { matcher: ["/"], } [V0_FILE]typescriptreact:file="lib/customPaywall.ts" isFixed="true" isEdit="true" import { getPaywallHtml, toJsonSafe, processPriceToAtomicAmount } from "x402/shared" import type { PaymentRequirements } from "x402/types" /** * Generates the custom paywall by injecting style overrides to the buttons. * * Note: We use environment variables for price and network configuration. */ export const customPaywallHtml: string = (() => { const price = process.env.PRICE || "$0.01" // Usar la variable de entorno PRICE con fallback const network = (process.env.NETWORK || "base") as PaymentRequirements["network"] const payTo = process.env.RESOURCE_WALLET_ADDRESS || "0x0000000000000000000000000000000000000000" const testnet = network === "base-sepolia" const atomic = processPriceToAtomicAmount(price, network) if ("error" in atomic) { throw new Error(atomic.error) } const { maxAmountRequired, asset } = atomic const paymentRequirements: PaymentRequirements[] = [ { scheme: "exact", network, maxAmountRequired, resource: "", // Will be updated in the browser with window.location.href description: "Unlock premium content with a small payment", mimeType: "application/json", payTo, maxTimeoutSeconds: 300, asset: asset?.address ?? "", outputSchema: undefined, extra: asset?.eip712, }, ] // Parse the price for display (remove the $ and convert to number) const priceValue = Number.parseFloat(price.replace("$", "")) // Base HTML generated by the library let html = getPaywallHtml({ amount: priceValue, paymentRequirements: toJsonSafe(paymentRequirements) as any, currentUrl: "", // Will be set in the client testnet, }) // Inject our own button styles and center everything const styleOverride = ` ` // Add footer HTML with links const footerHtml = ` ` html = html.replace("", `${styleOverride}`) // Replace the original content text with new wording that includes the dynamic price html = html.replace( /Access to protected content\. To access this content, please pay [^<]*/g, `Unlock Premium Content! Just a tiny payment of ${price} Base Sepolia USDC gives you instant access.`, ) // Add the network notice after the "Need Base Sepolia USDC? Get some here." text html = html.replace( /Need Base Sepolia USDC\? ]*>Get some here<\/a>\./g, 'Need Base Sepolia USDC? Get some here.

Important: Make sure you\'re connected to the Base Sepolia network in your wallet.

', ) // Add footer after the container html = html.replace("", `${footerHtml}`) return html })()

About

Tags

Share

More from estebansuarez

More Templates Like This

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This